<template>
  <el-cascader
    style="width: 200px"
    size="small"
    v-model="data"
    v-bind="$attrs"
    :options="selectOptions"
    @change="handleChange"
    :props="props"
    clearable
  />
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String]
    },
    query: {
      type: String,
      default: ""
    }
  },
  created() {},
  data() {
    return {
      data: this.value,
      selectOptions: [],
      props: {
        lazy: true,
        multiple: true,
        label: "name",
        value: "id",
        lazyLoad: (node, resolve) => {
          const { level, data } = node
          if (level === 0) {
            this.$ajax.get(this.$api.common.select_product_type).then((res) => resolve(res.data))
          } else if (level === 1) {
            const params = {
              category: data.code
            }
            this.$ajax.get(this.$api.product.product_series_list_classify, params).then((res) => resolve(res.data))
          } else if (level === 2) {
            const params = {
              seriesId: data.id
            }
            this.$ajax.get(this.$api.product.product_list, params).then((res) => resolve(res.data.list))
          } else {
            resolve([])
          }
        }
      }
    }
  },
  watch: {
    value(val) {
      this.data = val
    }
  },
  methods: {
    handleChange(val) {
      this.$emit("input", val)
      this.$emit("getNet", getNetParams(val, this.selectOptions))
    }
  }
}
function getNetParams(val, arr) {
  const first = val[0]
  const cur = arr.filter((el) => el.code === first)[0]
  if (cur && Array.isArray(cur.child)) {
    const second = val[1]
    const arr = cur.child
    const tem = arr.filter((el) => el.code == second)[0]
    if (tem) {
      return tem.networking
    }
  }
  return ""
}
</script>
<style lang="less"></style>
